<template>
	<view class="content">
		<view class="doctor-box">
			<view class="doctor-info">
				<view class="avatar">
					<image v-if="doctorInfo.avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
					<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
				</view>
				<view class="right-box">
					<view class="item-top">
						<view class="name">{{doctorInfo.name}}</view>
						<view class="position">{{doctorInfo.chief}}</view>
					</view>
					<view class="item-ct">
						<view class="order-box">
							<view class="titel">已服务订单:</view>
							<view class="nums">{{doctorInfo.inquiry_count}}单</view>
						</view>
						<!-- <view class="status" :class="doctorInfo.is_online != 1?'no':''">在线</view> -->
						<view class="status" v-if="doctorInfo.is_online == 1">在线</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rate-box">
			<view class="title">累计评价:</view>
			<uni-rate :touchable="false" :readonly="true" :value="doctorInfo.score" color="#d9d9d9" active-color="#ff6a00" />
			<view class="des">{{doctorInfo.score}}分</view>
		</view>
		<!-- 患者信息 -->
		<view class="patient-box">
			<view class="yy-inquiry-user-info patient-bg" v-if="patient_info.id" @click="selPatient">
				<view class="user-left">
					<view class="icon">
						<image v-if="patient_info.avatar" :src="patient_info.avatar" mode="aspectFill">
						</image>
						<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="user-right">
					<view class="info">
						{{ infoFormat(patient_info) }}
					</view>
					<view class="detail">
						{{ bodyStatae(patient_info)}}
					</view>
				</view>
			</view>
			<view class="yy-inquiry-user-sel patient-bg" v-else @click="selPatient">
				<text class="iconfont icon-jiahao1"></text>
				<view class="">选择患者</view>
			</view>
		</view>

		<!-- 立即支付 -->
		<view class="submit-box">
			<view class="price-box">
				<view class='txt'>￥</view>
				<view class='txt txt1'>{{doctor_price}}</view>
			</view>
			<view :class="submitEnable ? 'submit-btn':'submit-btn unenable' " @click="clickSubmit">确认支付</view>
			<view class="yy-safe-bh"></view>
		</view>

		<!-- 支付弹窗 -->
		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:totalPrice="doctor_price" :order_type="5"></payment>

	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		getUserInfo
	} from "@/api/user";
	import payment from "@/components/payment";
	import {
		userinfoFormat,
		userBodyStataeFormat
	} from "@/utils/format.js";
	import {
		createOnlineOrder,
		getDoctorDetail
	} from '@/api/inquiry.js'
	export default {
		computed: {
			...mapGetters(['userInfo', 'uid','routeError'])
		},
		components: {
			payment
		},
		data() {
			return {
				doctor_id: '',
				doctor_price: '0',
				doctorInfo:{},
				patient_info: {},
				submitEnable: false,

				pay_close: false,
				pay_order_id: "",
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: "wechat",
						title: "微信快捷支付",
						payStatus: 1
					},
					{
						name: "支付宝支付",
						icon: "icon-zhifubao",
						value: "alipay",
						title: "支付宝支付",
						payStatus: app.globalData.alipay_open
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: "balance",
						title: "可用余额:",
						number: 0,
						payStatus: app.globalData.yue_pay_status
					}
				],
				conversation_id: '',
				doc_mer_id:'',
			}
		},
		onLoad(ops) {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			if (!ops || !ops.doctor_id) {
				return this.$util.Tips({
					title: '缺少参数',
				})
			}
			this.doctor_id = ops.doctor_id;
			this.doctor_price = ops.price;
			this.doc_mer_id = ops.mer_id;

			// 监听选择患者
			this.$nextTick(() => {
				let that = this;
				uni.$on('yy_patient_sel', data => {
					//console.log('rk===>sel suc:' + JSON.stringify(data))
					that.patient_info = data;
					that.submitEnable = true;
				});
			});
		},
		onShow() {
			// 获取余额
			this.getUserInfo();
			// 医生信息
			this.getDoctorDetial();
		},
		onUnload() {
			uni.$off('yy_patient_sel');
		},

		methods: {
			/**
			 * 获取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo()
					.then(res => {
						that.payMode[2].number = res.data.now_money;
						// that.$set(that, 'payMode', that.payMode);
					})
					.catch(err => {
						return this.$util.Tips({
							title: err
						});
					});
			},
			/**
			 * 获取医生资料
			 */
			getDoctorDetial() {
				let where = {
					'id': this.doctor_id,
					'uid': this.uid,
				}
				getDoctorDetail(where).then(res => {
					this.doctorInfo = res.data;
				});
			},
			/**
			 * 选择患者
			 */
			selPatient() {
				uni.navigateTo({
					url: '/pages/shops/subs_inquiry/patients/index'
				})
			},
			/**
			 * 信息格式化
			 */
			infoFormat(info) {
				return userinfoFormat(info);
			},
			/**
			 * 状态格式化
			 */
			bodyStatae(info) {
				return userBodyStataeFormat(info);
			},
			/**
			 * 显示支付
			 */
			clickSubmit() {
				
				if(!this.submitEnable){
					return;
				}
				
				let param = {
					'uid': this.uid,
					'doctor_id': this.doctor_id,
					'patient_id': this.patient_info.id,
				}
				let that = this;
				/**
				 * rk_tips
				 * 1.请求创建订单、
				 * 2.弹出支付弹窗
				 * 3.支付完成跳转问诊
				 */
				uni.showLoading({
					title: '请稍后...'
				});
				createOnlineOrder(param).then(res => {
					console.log('rk==>[res]' + JSON.stringify(res));
					uni.hideLoading();
					if (res.status != 200) {
						return that.$util.Tips({
							title: res.message
						});
					}
					this.$set(this, "pay_close", true);
					this.pay_order_id = res.data.doctor_order_key;
					//rk_ 需要会话ID
					this.conversation_id = res.data.conversation_id;

				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});

			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {

				console.log('rk==>' + JSON.stringify(e));

				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 关闭支付组件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
				this.$emit("payClose");
			},
			/**
			 * 支付失败回调
			 *
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = "";
			},
			/**
			 * 支付成功回调
			 *
			 */
			pay_complete: function() {
				this.pay_close = false;
				this.pay_order_id = "";

				let that = this;
				
				let patientID = that.patient_info.id;
				
				// let yyMerId = uni.getStorageSync('YY_Mer_Id');
				
				let yyMerId = this.doc_mer_id;
				setTimeout(() => {
					// conversition_type:0-图文  1-在线  2-视频
					uni.redirectTo({
						url: '/pages/chat/customer_list/chath5?conversation_id=' 
						+ that.conversation_id 
						+'&patient_id='+patientID
						+'&mer_id='+yyMerId
						+'&conversition_type=1'
					})
				}, 2000);


			},
		}
	}
</script>

<style lang="scss">
	.contetnt {}

	.doctor-box {
		background-color: #fff;
		padding: 40rpx 30rpx 0rpx;
		display: flex;

		.doctor-info {
			display: flex;
			border-bottom: 1rpx solid #e8e8e8;
			padding-bottom: 30rpx;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right-box {
			margin: 0 20rpx 0;
			width: 550rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.item-top {
			display: flex;
			align-items: baseline;

			.name {
				font-size: $yy-title-big-font;
				font-weight: bold;
				margin-right: 10rpx;
			}

			.position {}
		}

		.item-ct {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.order-box {
				display: flex;

				.titel {
					color: #646464;
				}

				.nums {
					margin-left: 10rpx;
					color: #ff6a00;
				}
			}

			.status {
				background-color: $yy-main-col;
				font-size: 24rpx;
				color: #fff;
				padding: 0 20rpx;
				border-radius: 50rpx;
			}
			.no {
				background-color: #969696;
			}
		}
	}

	.rate-box {
		background-color: #fff;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.title {
			margin-right: 10rpx;
		}

		.des {
			margin-left: 10rpx;
		}


	}

	.patient-box {
		margin: 30rpx 30rpx;
		margin-bottom: calc(160rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(160rpx + env(safe-area-inset-bottom));

		.patient-bg {
			background-color: #fff;
		}
	}

	.submit-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.price-box {
			display: flex;
			align-items: baseline;

			.txt {
				color: #ff4f00;
			}

			.txt1 {
				font-size: 30px;
				font-weight: bold;
			}
		}

		.submit-btn {
			background-color: $yy-main-col;
			width: 520rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 20rpx;
		}

		.unenable {
			background-color: $yy-main-light-col;
		}
	}
</style>
